<template>
    <div>
        <el-dialog
            center
            custom-class="operate-login-div"
            width="70%"
            :visible.sync="DialogRegister"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            :show-close="false"
            :destroy-on-close="true"
        >
            <div class="max-w-screen-xl m-0  bg-white shadow sm:rounded-lg flex justify-center flex-1" style="border-top-right-radius: 8px;border-bottom-right-radius: 8px">
                <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
                    <div class="flex flex-col items-center">
                        <h1 class="text-2xl xl:text-3xl font-extrabold">用户注册</h1>
                        <div class="w-full flex-1 mt-8">
                            

                            <div class="mx-auto max-w-xs" v-if="!active" @click="$parent.playSound('click_one');">
                                <input v-model="params.email"
                                    class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                                    type="email"
                                    placeholder="电子邮箱"
                                />
                                <div style="width: 100%; text-align: right; margin-top: 10px;">
                                    <el-link type="primary" @click="$emit('close', 'dialogRegister', false, 'login')">已有账号？立即登录！</el-link>
                                </div>
                                <button  @click="send()"  v-loading="loading"
                                    class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
                                >
                                    <span class="ml-3">发送邮件验证码</span>
                                </button>
                            </div>

                            <div class="mx-auto max-w-xs" v-else @click="$parent.playSound('click_one');">
                                <input v-model="params.email_code"
                                    class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                                    type="text"
                                    placeholder="邮箱验证码（6位数字）"
                                />
                                <input v-model="params.nickname"
                                    class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                                    type="text"
                                    placeholder="请输入您的昵称"
                                />
                                <input v-model="params.password"
                                    class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                                    type="password"
                                    placeholder="密码（6-18位字符，不包含特殊字符）"
                                />

                                <input v-model="params.password2"
                                    class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                                    type="password"
                                    placeholder="确认密码（6-18位字符，不包含特殊字符）"
                                />
                                <div style="width: 100%; text-align: right; margin-top: 10px;">
                                    <el-link type="primary" @click="$emit('close', 'dialogRegister', false, 'login')">已有账号？立即登录！</el-link>
                                </div>
                                <button v-loading="loading" @click="submit"
                                    class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
                                >
                                    <span class="ml-3">立即注册</span>
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="flex-1 text-center hidden lg:flex" style="background-color: transparent !important;">
                    <div class="w-full bg-contain bg-center bg-no-repeat login-card-backimg">
                        <img src="@/assets/images/button/62.png" @click="$emit('close', 'dialogRegister', false)" width="46" height="46" style="float: right;" alt="">
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'register',
    props: {
        DialogRegister: {
            required: true, //是否是必要传值  可不要时为 false
            type: Boolean, //定义类型 类型  ：字符串类型、
            default: false //没有传值的话 默认值 一般与 required:false 一起用
        }
    },
    data() {
        return {
            loading: false,

            active: false,

            params: {
                email: '',
                email_code: '',
                password: '',
                password2: '',
            },
        };
    },
    watch: {
        DialogRegister: {
            handler(newValue, oldValue) {
                console.log('DialogRegister newValue, oldValue :', newValue, oldValue);
                if (!newValue) {
                    this.active = false;
                    console.log("this.active", this.active)
                }
            },
            deep: true
        }
    },
    methods: {
        submit() {
            // ^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$
            // ^[a-zA-Z0-9]{6,18}$
            let regexp = new RegExp(/^[a-zA-Z0-9]{6,18}$/);
            if (!regexp.test(this.params.password) || this.params.password != this.params.password2) {
                this.$notify.info({ title: 'Notice', message: "两次输入密码不一致，或密码格式错误（6-18位字符，请不要输入特殊字符）" });
                return false;
            }
            // 播放音频
            this.$parent.playSound('click_one');
            // 加载
            this.loading = true;
            this.$post('/api/player/register.html', this.params).then(res => {
            	if (res.code == 200) {
                    this.$notify.success({ title: 'Notice', message: "注册成功，请前往登录" });
                    let _this = this;
                    setTimeout(function() {
                        _this.$emit('close', 'dialogRegister', false, 'login');
                        _this.loading = false;
                    }, 1500);
            	} else {
                    this.$notify.info({ title: 'Notice', message: res.msg });
                    this.loading = false;
                }
            }).catch(err => {
                console.log(err)
                this.loading = false;
            });
        },
        send(){
            // 播放音频
            this.$parent.playSound('click_one');
            // 加载
            this.loading = true;
            this.$post('/api/player/send-email.html', {email: this.params.email}).then(res => {
            	if (res.code == 200) {
                    this.active = true;
                    this.$notify.success({ title: 'Notice', message: "邮件已发送，请登录您的邮箱查看" });
            	} else {
                    this.$notify.info({ title: 'Notice', message: res.msg });
                }
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            });
        },
    }
};
</script>


<style src="@/assets/css/tailwind.min.css" scoped></style>
<style scoped>
.weixin,
.weibo {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: cover;
}

.weixin {
    background-image: url('../../../../assets/images/other/wx.png');
}

.weibo {
    background-image: url('../../../../assets/images/other/qq.png');
}
.bg-indigo-100 {
    background-color: #ebf4ff;
}
.border-gray-200 {
    border-color: #edf2f7;
}
.bg-gray-100 {
    background-color: #f7fafc;
}
.bg-indigo-500 {
    background-color: #667eea;
}
</style>



